<template>
  <div class="attendanceSituation pageFlex pageFlexCenter">
    <div ref="echartsRef" style="width: 210px; height: 210px;"></div>
    <div class="rightBox pageFlexColumn pageAlignCenter">
      <div class="partItem pageFlex pageAlignCenter" v-for="item in recordList" :key="item.id">
        <div class="radiusBox" :style="{ background: item.color }"></div>
        <div class="text">{{ item.name }}</div>
        <div class="num">{{ item.num }}天</div>
      </div>
    </div>
  </div>
</template>

<script setup name="AttendanceStatistics">
import { ref, onMounted, nextTick, shallowRef } from "vue";
import * as echarts from "echarts";
import { getClockSituationApi } from "@/api/home/index";

const chart = shallowRef(null);
const echartsRef = ref(null);
const recordList = ref([
  {
    id: 1,
    name: "已打卡",
    num: 15,
    color: "#165DFF",
  },
  {
    id: 2,
    name: "未打卡",
    num: 5,
    color: "#FB9254",
  },
]);
const alreadyClockDays = ref("");

const option = ref({
  backgroundColor: "transparent",
  tooltip: {
    trigger: 'item',
    formatter: (e)=>{
      return `<span style="width: 8px;height: 8px;border-radius: 100%;background-color:${recordList.value[e.dataIndex].color};display: inline-block;"></span>
      <span style="color: #4E5969;font-size: 12px;margin-left: 6px;">${e.name}</span>
      <span style="color: #1D2129;font-size: 12px;margin-left: 16px;">${e.value}天</span>`
    }
  },
  title: {
    text: "{b|连续打卡}"+"{a|" + alreadyClockDays.value + "}"+"{b|天}",
    top: 91,
    left: -5,
    textStyle: {
      width: 210,
      rich: {
        a: {
          color: "#FF7D00",
          align: "center",
          fontSize: 20,
          fontWeight: "bold",
        },
        b: {
          color: "#4E5969",
          align: "center",
          fontSize: 15,
          fontWeight: "bold",
        },
      },
    },
  },
  series: [
    {
      name: "已打卡",
      type: "pie",
      avoidLabelOverlap: false,
      radius: ['57%', '79%'],
      center: ["50%", "50%"],
      label: {
        show: false,
      },
      emphasis: {
        scale: false,
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 15,
          name: "已打卡",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#4A8DF4",
              },
              {
                offset: 0.5,
                color: "#67AAF8",
              },
              {
                offset: 1,
                color: "#73B7F9",
              },
            ]),
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
        {
          value: 5,
          name: "未打卡",
          itemStyle: {
            color: "transparent",
          },
        },
      ]
    },
    {
      name: "未打卡",
      type: "pie",
      radius: ['57%', '75%'],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      emphasis: {
        scale: false,
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 15,
          name: "已打卡",
          itemStyle: {
            color: "transparent",
          },
        },
        {
          value: 5,
          name: "未打卡",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#FEBA6C",
              },
              {
                offset: 0.5,
                color: "#FC9958",
              },
              {
                offset: 1,
                color: "#FB9254",
              },
            ]),
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      ]
    },
  ],
});

onMounted(() => {
  nextTick(() => {
    chart.value = echarts.init(echartsRef.value);
    chart.value.setOption(option.value);
  });
});

/**
 * 获取数据
 */
const getClockSituation = () => {
  getClockSituationApi().then((res) => {
    if (res.code == 200) {
      const data = res.data;
      recordList.value[0].num = data.alreadyClockDays;
      recordList.value[1].num = data.notClockDays;

      option.value.series[0].data[0].value = data.alreadyClockDays;
      option.value.series[0].data[1].value = data.notClockDays;

      option.value.series[1].data[0].value = data.alreadyClockDays;
      option.value.series[1].data[1].value = data.notClockDays;
      alreadyClockDays.value = data.alreadyClockDays;
      option.value.title.text = "{b|连续打卡}"+"{a|" + alreadyClockDays.value + "}"+"{b|天}";
      chart.value.setOption(option.value);
    }
  });
};

getClockSituation();
</script>

<style scoped lang="scss">
@import "@/assets/styles/public.scss";
.attendanceSituation{
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  .rightBox{
    .partItem{
      flex-wrap: wrap;
      .radiusBox{
        width: 8px;
        height: 8px;
        border-radius: 100%;
      }
      .text{
        height: 20px;
        font-weight: 400;
        font-size: 12px;
        color: #4E5969;
        line-height: 20px;
        margin-left: 4px;
      }
      .num{
        height: 22px;
        font-weight: 500;
        font-size: 14px;
        color: #1D2129;
        line-height: 22px;
        margin-left: 4px;
      }
    }
  }
}
</style>
